Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add util genCalc and type AbstractCalculator #184

Merged
merged 2 commits into from
Jun 17, 2024
Merged

Conversation

YumoImer
Copy link
Collaborator

[RFC] Migrate the genCalc util from antd repo

Summary

genCalc API 由原 https://github.com/ant-design/ant-design/tree/master/components/theme/util/calc 迁移至 @ant-design/cssinjs

Motivation

在 antd 中书写组件样式时,均统一使用 repo 中的 genStyleHooksmergeTokengenPresetColorgenSubStyleComponent等 API,目前都统一存放于 https://github.com/ant-design/ant-design/tree/master/components/theme/util 目录下。

当前 antd 有类似@ant-design/web3@ant-design/x 等生态库,在生态库中编写组件样式时目前几种选择:

  1. 照搬 antd repo 中的代码至各生态库
  2. 生态库内仅使用 @ant-design/cssinjs 简单实现类似的功能封装
  3. 将可抽离的通用逻辑迁移至 @ant-design/cssinjs ,尽可能减少重复代码

对于方式一,并不可取,不同的库同样的代码,这会给后续的维护造成负担。

方式二,使用了当前已有的 @ant-design/cssinjs API,如 useStyleRegister 等,详见:https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/theme/useStyle/index.ts

方式三,将通用的工具、逻辑抽离至 @ant-design/cssinjs,尽可能减少重复代码。该 RFC 仅迁移工具函数 genCalc 及其对应抽象类 AbstractCalculator

API

genCalc

type GenCalcType = (type: 'css' | 'js', unitlessCssVar: Set<string>) => (num: number | string | AbstractCalculator) => CSSCalculator | NumCalculator

type AbstractCalculator

abstract class AbstractCalculator {
  /**
   * @descCN 计算两数的和,例如:1 + 2
   * @descEN Calculate the sum of two numbers, e.g. 1 + 2
   */
  abstract add(num: number | string | AbstractCalculator): this;

  /**
   * @descCN 计算两数的差,例如:1 - 2
   * @descEN Calculate the difference between two numbers, e.g. 1 - 2
   */
  abstract sub(num: number | string | AbstractCalculator): this;

  /**
   * @descCN 计算两数的积,例如:1 * 2
   * @descEN Calculate the product of two numbers, e.g. 1 * 2
   */
  abstract mul(num: number | string | AbstractCalculator): this;

  /**
   * @descCN 计算两数的商,例如:1 / 2
   * @descEN Calculate the quotient of two numbers, e.g. 1 / 2
   */
  abstract div(num: number | string | AbstractCalculator): this;

  /**
   * @descCN 获取计算结果
   * @descEN Get the calculation result
   */
  abstract equal(options?: { unit?: boolean }): string | number;
}

Basic Example

genCalc

import { genCalc } from '@ant-design/cssinjs';

genCalc('js', new Set());

genCalc('css', new Set());

type AbstractCalculator

import type { AbstractCalculator } from '@ant-design/cssinjs';

Unresolved questions

由于 antd 中常用API genStyleHooks 调用 genSubStyleComponent 调用 genCalc,迁移 genCalc 仅解决部分代码重复问题,后续仍需要持续优化。

另外,需要在 antd 中提 PR 对此次变更兼容。后续将补充。

Copy link

github-actions bot commented Jun 13, 2024

🎊 PR Preview 1e06d3f has been successfully built and deployed to https://ant-design-cssinjs-preview-pr-184.surge.sh

🕐 Build time: 92.05s

🤖 By surge-preview

@@ -55,6 +56,7 @@ export type {
Transformer,
Linter,
StyleProviderProps,
AbstractCalculator,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个不用 export 了吧

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@MadCcc MadCcc merged commit f115491 into master Jun 17, 2024
8 checks passed
@MadCcc MadCcc deleted the feat/calc branch June 17, 2024 03:56
@MadCcc
Copy link
Member

MadCcc commented Jun 17, 2024

This was referenced Sep 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants